<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>我的IP</title>
    <style type="text/css">
        .are {
            display: block;
            height: 30px;
            margin-left: 5%;
            padding-top: 1%;
            width: 90%;
            border-bottom: #dadada;
            border-bottom-width: 1px;
            border-bottom-style: dashed;
        }

        .ip_line {
            display: inline-block;
        }

        label.ip_line {
            color: cadetblue;
        }

        .ip_line.des {
            color: rgb(166, 166, 171);
            font-size: 0.7rem;
            margin-left: 20px;
        }

        .ip {
            width: 35%;
            margin-left: 5%;
        }

        #address {
            margin-left: 5%;
        }

        @media (prefers-color-scheme: light) {
            .ip {
                color: black;
            }

            .other {
                color: #818384;
            }

            .other ul {
                background-color: #f1f1f1;
            }

            #address {
                color: black;
            }
        }

        @media (prefers-color-scheme: dark) {
            html {
                background: #363A3A;
            }

            .ip {
                color: white;
            }

            .other {
                color: #b7b7b7;
            }

            .other ul {
                background-color: #292929;
            }

            #address {
                color: white;
            }
        }

        @media (prefers-color-scheme: no-preference) {
            .ip {
                color: black;
            }

            .other {
                color: #818384;
            }

            .other ul {
                background-color: #f1f1f1;
            }

            #address {
                color: black;
            }
        }


        button.ip_line {
            border: 0;
            border-radius: 4px;
            height: 20px;
            cursor: pointer;
        }

        button.ip_line:hover {
            background: #12dddd;
        }

        .other {
            font-size: 0.95rem;
            width: 90%;
            margin-left: 5%;
            padding-top: 10px;
        }

        .other label {
            color: #c0c3c6;
        }

        .other li {
            margin-left: 2%;
        }

        .other ul {
            padding: 0.8rem;
            margin: 0.2rem 0 0;
            border-radius: 5px;
        }

        .net_list {
            list-style: none;
        }
    </style>
</head>
<body>

<div class="are">
    <label class="ip_line">局域网:</label>
    <div class="ip_line ip" id="lanIpv4"></div>
    <button class="ip_line" onclick="copyLan()">点击复制</button>
    <div id="is_copy" class="ip_line des"></div>
</div>
<div class="are">
    <label class="ip_line">广域网:</label>
    <div class="ip_line ip" id="wanIpv4"></div>
    <button class="ip_line" onclick="copyWan()">点击复制</button>
    <div class="ip_line des"></div>
</div>
<div class="are">
    <label class="ip_line">城&nbsp;&nbsp;&nbsp;市:</label>
    <div class="ip_line" id="address"></div>
</div>

<div class="other" id="other">
    <label>其他网卡信息:</label>
</div>
</body>

<script type="text/javascript">

    utools.onPluginEnter(({code, type, payload}) => {

        // 获取内网地址
        window.lanIPv4((ip) => {
            utools.copyText(ip);
            document.getElementById("is_copy").innerText = "已自动复制到剪贴板";
            document.getElementById("lanIpv4").innerText = ip;
        });
        // 获取地理信息
        window.locationInfo((address) => {
            document.getElementById("address").innerText = address;
        }, function (error) {
            console.error(error);
        });
        // 获取外网地址
        window.wanIPv4((ip, cname) => {
            document.getElementById("wanIpv4").innerText = ip;
            let addr = document.getElementById("address").innerText;
            // 获取地理信息的优先级比较大
            if(addr === ""){
                document.getElementById("address").innerText = cname;
            }
        }, function (error) {
            document.getElementById("wanIpv4").innerText = error;
            console.error(error);
        });

        window.netInfo((name, obj) => {

            let ul = document.createElement("ul");
            createLi(ul, `名称：${name}`);
            createLi(ul, `地址：${obj.address}`);
            createLi(ul, `掩码：${obj.netmask}`);
            createLi(ul, `物理地址：${obj.mac}`);
            createLi(ul, `协议族：${obj.family}`);
            document.getElementById("other").appendChild(ul);
        })
    })

    function createLi(ul, text) {
        let li = document.createElement("li");
        li.setAttribute("class", "net_list")
        li.innerText = text;
        ul.appendChild(li);
    }

    function copyLan() {
        utools.copyText(document.getElementById("lanIpv4").innerText);
        document.getElementById("is_copy").innerText = "复制成功";
    }

    function copyWan() {
        utools.copyText(document.getElementById("wanIpv4").innerText);
    }
</script>
</html>